{% extends "admin_base.html" %}
{% block pageContent %}
    <form enctype="multipart/form-data" method="POST" id="sectionForm">
    <table>
    {{ form.as_table }}
    <tr>
        <th>Nodes:</th>
        <td id="nodes">
            <ul id="sectionNodes" class="sortableNodes">
            {% for node in sectionNodes %}
                <li>{{node.title}}-{{node.id}}</li>
            {% endfor %}
            </ul>
            <ul id="availableNodes" class="sortableNodes">
            {% for node in availableNodes %}
                <li>{{node.title}}-{{node.id}}</li>
            {% endfor %}
            </ul>
        </td>
    <tr>
        <th>&nbsp;</th>
        <td>
            {% ifequal action "update" %}
            <input id="submitButton" type="submit" value="Update" />
            {% else %}
            <input id="submitButton" type="submit" value="Create" />
            {% endifequal %}
            <input id="cancelButton" type="button" value="Cancel" onclick="history.back();" />
        </td>
    </tr>
    </table>
    </form>
    <script type="text/javascript" >
        $(document).ready(function() {
            $("#sectionNodes, #availableNodes").sortable({
    			connectWith: '.sortableNodes'
    		}).disableSelection();
        });
        
        $('#sectionNodes').bind('sortupdate', function(event, ui) {
            var nodeIDs = '';
            $('#sectionNodes').children().contents().each(function(index, textNode) {
                if (nodeIDs != '')
                    nodeIDs += ',';
                nodeIDs += textNode.textContent.match('[0-9]+$')[0];
            });
            $('#id_nodes').val(nodeIDs);
        });
        
    </script>
{% endblock %}